<template>
    <div class="login_container">
       <div class="login_box">
            <div class="avatar_box">
                <!-- 头像区域 -->
               <img src="../assets/logo.png" alt="">
               <!-- 头像区域 -->
               
            </div>
            <!-- 登录表单 -->
               <el-form ref="loginFromRef" class="login_form" :model="loginForm" :rules="loginFormRules">
                   <!-- 用户名 -->
                    <el-form-item prop="username">
                         <el-input v-model="loginForm.username" placeholder="请输入用户名"  prefix-icon="iconfont icon-user" > </el-input>
                      
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item prop="password">
                       <el-input type="password" v-model="loginForm.password" placeholder="请输入内容"  prefix-icon="iconfont icon-yidongduanicon-"> </el-input>
                      
                    </el-form-item>
                    <!-- a按钮 -->
                    <el-form-item class="btns">
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-button type="info" @click="resetLoginForm">重置</el-button>
                    </el-form-item>
               </el-form>
       </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
          var checkPhone = (rule, value, callback) => {
            const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
            if (!value) {
            return callback(new Error('电话号码不能为空'))
            }
            setTimeout(() => {
            // Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
            // 所以我就在前面加了一个+实现隐式转换

            if (!Number.isInteger(+value)) {
                callback(new Error('请输入数字值'))
            } else {
                if (phoneReg.test(value)) {
                callback()
                } else {
                callback(new Error('电话号码格式不正确'))
                }
            }
            }, 100)
        }
        var checkEmail = (rule, value, callback) => {
            const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
            if (!value) {
            return callback(new Error('邮箱不能为空'))
            }
            setTimeout(() => {
            if (mailReg.test(value)) {
                callback()
            } else {
                callback(new Error('请输入正确的邮箱格式'))
            }
            }, 100)
        }
      return {
        loginForm: {
          username: 'admin',
          password: '123456'
        
        },
        loginFormRules: {
          username: [
            { required: true, message: '请输入用户', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3,  max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        }
      }
    },
    methods: {
        // 点击重置按钮，重置表单
        resetLoginForm(){
            console.log(this);
            this.$refs.loginFromRef.resetFields();
        },
       async login(){
           this.$refs.loginFromRef.validate(async validate =>{
             console.log("登录验证",validate);
             if (!validate) return;
             const res= await axios.post('login',this.loginForm);
              console.log("登录请求",res);
              if (res.data.meta.status ===400) {
                  console.log("登录失败");
                  this.$notify.error({
                    title: '错误',
                    message: '登录失败'
                    });
              }else{
                 this.$notify({
                    title: '成功',
                    message: '登录成功',
                    type: 'success'
                 }); 
                //  1.登录之后的token，保存到客户端的sessonStorage中。
                //    1.1项目中除了登录之外的其他API接口，必须登录之后才能访问。
                    //1.2 token只应在当前网站打开期间生效，所以将token保存到sessionStorage中 
                    window.sessionStorage.setItem("token",res.data.data.token)  
                // 2.通常编程试导航跳转到后台主页
                  this.$router.push("/home")

              }
           });
        }
    }
}
</script>
<style lang="less" scoped>
 .login_container{
     background: #2b4b6b;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 .login_box{
     width: 450px;
     height: 300px;
     background-color: #ffffff;
     border-radius: 3px;
     border: 1px solid #cccccc;
     position: relative;
     .avatar_box{
         height: 130px;
         width: 130px;
          border-radius: 50%;
          box-shadow: 0 0 10px #dddddd;
            background-color: #ffffff;
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%);
         img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
         }
     }
     .login_form{
         position: absolute;
         bottom: 0;
         width: 80%;
         padding-left: 10%;
         .btns{
            display: flex;
            justify-content: flex-end;
         }
     }
 }
 
</style>


